react-cssfn - Writes CSS in (similar) React Hooks
A lib for generating Style Sheet (css) with JavaScript function.
Similar to React Hooks but for generating css dynamically.
By underlying JavaScript language, the css can be easily exported/imported as a regular JavaScript module.
The generated css can be used in your <React Component> easily, something like this:
const useButtonSheet = createUseSheet(() => [
]);
const awesomeButtonSheet = useButtonSheet();
return (
<button className={awesomeButtonSheet.main}>
</button>
);
Because your stylesheet is a javascript function, your css properties & values can be taken from another javascript objects/variables/functions:
layout({
display: isVertical ? 'inline-flex' : 'flex',
...anotherStuff(),
})
Preview
export const usesAwesomeButton = () => composition([
imports([
stripoutControl(),
usesButtonBase(),
]),
layout({
display : 'flex',
flexDirection : 'row',
background : 'pink',
color : 'darkred',
...children(['span', '.logo'], [
imports([
]),
layout({
}),
]),
}),
variants([
rule('.big', [
layout({
fontSize: 'xx-large',
}),
]),
rule('.dark', [
]),
]),
states([
rule([':disabled', '.disabled'], [
]),
]),
]);
export const useAwesomeButtonSheet = createUseSheet(() => [
mainComposition([
imports([
usesAwesomeButton(),
]),
]),
compositionOf('otherClass', [
imports([
]),
]),
]);
Then we can consume our generated css like this:
export default function AwesomeButton(props) {
const btnSheet = useAwesomeButtonSheet();
return (
<>
<button className={btnSheet.main}>Awesome!</button>
<button className={btnSheet.otherClass}>Cool!</button>
</>
);
}
Features
- Includes all Vanilla & ES6 JavaScript features.
- Lazy execution (your function will be executed on demand).
- Cached - your function only be executed once (or never if not needed).
- IntelliSense supported - Our cssfn is written in TypeScript (superset of JavaScript).
- CSS Variable Management - Never write variable name in plain string.
- CSS Config Management - Shares a common setting to many components.
Installation
Using npm:
npm i @cssfn/react-cssfn
Support Us
If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.
We always maintain our projects as long as we're still alive.
[Make a donation]